<template>
    <view class="wrap">
        <view class="title">请输入</view>
        <view class="password-wrap"><Password :borderStyle="borderStyle" :borderCheckStyle="borderCheckStyle" @getInputVerification="inputChange"></Password></view>
        <view class="btn" :class="{ passCheckStyle: passCheck }" @click="submit">确认</view>
    </view>
</template>
<script>
import Password from './components/password.vue';
import { bindCode } from '@/api/mine.js';
export default {
    name: '',
    data() {
        return {
            borderCheckStyle: 'border:1px solid #08c160;',
            borderStyle: 'border: solid 1px #e9ebf3;',
            passCheck: false,
            password: '',
            reFocus: true
        };
    },
    onLoad(option) {},
    computed: {},
    mounted() {},
    created() {},
    methods: {
        inputChange(value) {
            this.passCheck = value.length >= 6 ? true : false;
            this.password = value;
        },
        async submit() {
            if (!this.passCheck) {
                uni.showToast({
                    icon: 'none',
                    title: '请填写密码'
                });
                return;
            }
            let res = await bindCode({
                code: this.password
            });
            if (res && res.RequestStatus == 100) {
                this.$storage.setStorage('password', this.password);
                uni.redirectTo({
                    url: '/pages/minePages/upload/upload'
                });
            }
        }
    },
    components: { Password }
};
</script>
<style lang="less" scoped="scoped">
.wrap {
    width: 100%;
    padding: 0 40rpx;
}
.title {
    margin-top: 160rpx;
    font-size: 32rpx;
    color: #262832;
}
.password-wrap {
    display: flex;
    margin-top: 60rpx;
    width: 100%;
}
.password {
    width: 80rpx;
    height: 80rpx;
    border-radius: 10rpx;
    border: solid 1rpx #08c160;
    input {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
    }
}
.btn {
    margin: 200rpx auto;
    width: 600rpx;
    height: 86rpx;
    border-radius: 10rpx;
    color: #ffffff;
    line-height: 86rpx;
    text-align: center;
    background-color: #ccc;
}
.passCheckStyle {
    background-image: linear-gradient(45deg, #47c649 0%, #5ad25c 100%), linear-gradient(#0ac26b, #0ac26b);
}
</style>
